<template>
  <div class="right-box">
    <div class="month-box">
      <div class="monthly-cost-box">
        <span class="monthly-span"></span>
        <span class="monthly-name" style="width: 100%;">当月成本</span>
      </div>
      <div class="monthly-val-box">
        <img :src="store_screen_4" alt="" />
        <div class="monthly-val">{{allData.same_cost}}</div>
      </div>
    </div>
    <div class="sales-box">
      <div class="sales-ranking">
        <div style="display: flex;align-items: center;">
          <span class="sales-span"></span>
          <span class="sales-value">当日门店成本：{{allData.today_store_cost_total}}</span>
        </div>
      </div>
      <div class="shop-content">
        <div class="shop-content-box" ref="shop-content-box" :style="{'background-size' : backgroundSize}">
          <vue-seamless-scroll :data="allData.today_store_cost_list" style="overflow: hidden;" :class-option="classOption">
            <div class="shop-color" v-for="(item, index) in allData.today_store_cost_list" ref="scroll_he">
              <span class="shop-rank" :style="{'margin-right': rank == 10 ? '0.4rem' : ''}">{{ item.rank }}</span>
              <span class="shop-title" style="flex: 5;margin: 0 1rem;">{{item.name}}</span>
              <span class="shop-title"  style="flex: 1;text-align: left;">{{item.price}}</span>
            </div>
          </vue-seamless-scroll>
        </div>

      </div>
    </div>
  </div>
</template>
<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  props: {
    allData: {
      type: null,
      default: () => ({})
    },
    ininValue: {
      type: null,
      default: true
    }
  },
  watch: {
    allData(newVal,oldVal){
      if(this.allData.today_store_cost_list.length) {
        this.$nextTick(() => {
          if(this.allData.today_store_cost_list.length >= 11) {
            this.$set(this.classOption,'autoPlay',true)
          }
          this.classOption.singleHeight = this.$refs['scroll_he'][0].offsetHeight.toFixed(2) * 1
          this.backgroundSize = `100% ${(this.$refs['scroll_he'][0].offsetHeight).toFixed(2) * 2}px`
        })
      }
    }
  },
  data() {
    return {
      classOption: {
        direction: 0,
        singleHeight: "",
        autoPlay: false,
      },
      backgroundSize: "",
      store_screen_4:window.location.origin+'/static/local/store-screen/store-screen-04.png',
    };
  },
  mounted() {
    if(this.allData.today_store_cost_list.length) {
      this.$nextTick(() => {
        if(this.allData.today_store_cost_list.length >= 11) {
          this.$set(this.classOption,'autoPlay',true)
        }
        this.classOption.singleHeight = this.$refs['scroll_he'][0].offsetHeight.toFixed(2) * 1
        this.backgroundSize = `100% ${(this.$refs['scroll_he'][0].offsetHeight).toFixed(2) * 2}px`
      })
    }
  },
  methods: {},
  components: {
      vueSeamlessScroll
    }
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
@media screen and (max-height: 820px) {
  .monthly-val-box {
    height: 23.5vh !important;
    img {
      height: 13vh !important;
    }
  }
}
@media screen and (max-height: 680px) {
  .monthly-val-box {
    height: 22.5vh !important;
    img {
      height: 12vh !important;
    }
  }
}
@media (min-height: 980px) and (max-height: 1120px) {
  .monthly-val-box {
      height: 25vh !important;
      img {
        height: 15.5vh !important;
      }
    }
}
@media (min-height: 1120px) {
  .monthly-val-box {
    height: 25.5vh !important;
    img {
      height: 16vh !important;
    }
  }
}
.right-box {
  width: 25%;
  .month-box {
    .monthly-cost-box {
      display: flex;
      background: linear-gradient(90deg, #536d8f 0%, rgba(13, 36, 65, 0) 100%);
      align-items: center;
      .monthly-span {
        display: block;
        width: 0.3rem;
        height: 2rem;
        background: linear-gradient(180deg, #2b6dcc 0%, #d6efe7 100%);
      }
      .monthly-name {
        font-weight: 500;
        font-size: 0.8rem;
        color: #ffffff;
        margin-left: 0.45rem;
      }
    }
    .monthly-val-box {
      background: linear-gradient(180deg, #050f27 0%, #0d2441 100%);
      border: 1px solid #536d8f;
      height: 24.5vh;
      margin-bottom: 8vh;
      img {
        margin: 2vh 0 0 0;
        height: 14vh;
      }
      .monthly-val {
        font-weight: bold;
        font-size: 1.2rem;
        color: #ffffff;
      }
    }
  }
  .sales-box {
    margin-top: 1.2rem;
    .sales-ranking {
      background: linear-gradient(90deg, #536d8f 0%, rgba(13, 36, 65, 0) 100%);
      display: flex;
      align-items: center;
      font-weight: 500;
      font-size: 0.8rem;
      color: #ffffff;
      // margin-bottom: 1rem;
      justify-content: space-between;
      .sales-span {
        display: block;
        width: 0.3rem;
        height: 2rem;
        background: linear-gradient(180deg, #2b6dcc 0%, #d6efe7 100%);
        margin-right: 0.45rem;
      }
    }
    .shop-content {
      // background: linear-gradient(180deg, #050f27 0%, #0d2441 100%);
      border: 1px solid #536d8f;
      padding: 1rem 0.6rem;
      font-weight: 400;
      font-size: 0.75rem;
      color: #ffffff;
      height: 46.5vh;
      display: flex;
      flex-direction: column;
      .shop-content-box {
        background: linear-gradient(#15223e 50%,#050F27 50%);
        // background-size: 100% 84px;
        overflow: hidden;
      }
      .shop-color {
        padding: 0 2.2rem;
        height: 4.4vh;
        display: flex;
        align-items: center;
      }
      .shop-rank {
      }
      .shop-title {
        width: 100%;
        white-space: nowrap; 
        overflow: hidden; 
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
